/*[class*=emoji-] {*/
    /*text-indent: -9999em;*/
    /*font-size: 14px;*/
    /*height: 20px;*/
    /*width: 20px;*/
    /*top: -2px;*/
    /*position: relative;*/
    /*display: inline-block;*/
    /*margin: 0 2px;*/
    /*line-height: normal;*/
    /*vertical-align: middle;*/
    /*background-image: url("../images/mega/emoji-sprites-v1.png");*/
    /*background-size: 3600%;*/
    /*background-repeat: no-repeat;*/
/*}*/
.emoji.demo-icon {
    display: block;
    float: left;
    top: 0;
    margin: 14px 0 0 0;
}

.emoji.square-button {
    margin: 3px 5px 0 5px;
}
.emoji.square-button span {
    top: 6px;
}
.emoji.square-button img {
    top: 5px;
    position:relative;
}
.emoji-type-txt {
    font-size: 14px;
    line-height: 18px;
    color:#666666;
    text-transform:uppercase;
    padding: 21px 11px 13px 11px;

}
.emoji-type-txt:first-child {
    padding: 2px 11px 15px 11px;
}

.emoji.title {
    font-size: 14px;
    line-height: 18px;
    color: #666666;
    float: left;
    margin-top: 15px;
    margin-inline-start: 10px;
}
.rtl .emoji.title {
    float: right;
}

.emoji.emoji-loading {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 6px;
}

.emoji-preview {
    padding-left: 10px;
}
.emoji-preview img {
    float: left;
    display: inline-block;
    vertical-align: top;
    margin: 14px 0px 0 0 !important;
}
.rtl .emoji-preview img {
    float: right;
}
.dropdown.emoji .loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    box-sizing: border-box;
    padding: 0 24px;
    color: var(--text-color-medium);
}
.popup-footer.emoji .button i {
    margin: 6px auto 0;
}

img.emoji,
.chat-topic-block img.emoji.big,
.small-info-txt img.emoji.big,
.result-table-row img.emoji.big,
.fm-picker-dialog img.emoji.big {
    width: 20px;
    height: 20px;
    display:inline-block;
    vertical-align: middle;
    margin-top: -3px;
    margin-left: 2px;
    margin-right: 2px;
}
.result-table-row img.emoji,
.result-table-row img.emoji.big {
    margin-top: -3px;
}

.fm-picker-dialog img.emoji.big {
    margin-top: 2px;
}

img.emoji.big {
    width: 32px;
    height: 32px;
    display:inline-block;
    vertical-align: middle;
    margin-top: 4px;
    margin-bottom: 6px;
    margin-left: 2px;
    margin-right: 2px;
}


.conversations-pane img.emoji {
    width: 12px;
    height: 12px;
}
.chat-right-area img.emoji.big,
.chat-topic-block .chat-topic-text img.emoji.big,
.chat-topic-block .user-card-data img.emoji.big {
    width: 20px;
    height: 20px;
    margin: 0;
}
.messages-block .message.body .user-card-name .emoji.big,
.messages-textarea-placeholder .emoji {
    width: 16px;
    height: 16px;
    margin-top: 0;
}


/** new hover/active styles for the emoji dropdown **/
.button.square-button {
    width: 32px;
    height: 32px;
    float: left;
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-transition: all 100ms ease-in-out;
    transition: all 100ms ease-in-out;
    text-align: center;
}
.button.square-button:last-child {
    margin-right: 0;
}
.button.square-button i {
    transition: all 200ms ease-in-out;
    --icon-size: 24px;
    --mask-color: var(--icon-rest);
}
.button.square-button:hover i,
.button.square-button.active i {
    --mask-color: var(--icon-active);
}
.button.square-button:after {
    content: '';
    display: block;
    position: relative;
    bottom: -6px;
    left: -2px;
    width: 36px;
    height: 2px;
    transition: all 200ms ease-in-out;
}
.button.square-button.active:after {
    background-color: var(--stroke-info);
}
.button.square-button.emoji {
    cursor: pointer;
}
